<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Thông tin trang</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{pageBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!pageBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <style type="text/css">
            .colStyle1 {
                vertical-align: top;
                width: 20%;
            }
            .colStyle2 {
                vertical-align: top;
            }
        </style>
        <f:event type="preRenderView" listener="#{pageBean.preViewAction()}" />
        <h:form id="mainForm">
            <h:panelGrid columns="2" cellpadding="5" width="100%" columnClasses="colStyle1, colStyle2">
                <ui:include src="/templates/menu.xhtml"/>
                    
                <p:panel header="Thông tin trang">
                    <p:messages id="msgs"/>
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">
                            <p:button value="Tạo mới" outcome="new"/>
                            <p:commandButton value="Sửa" action="#{pageBean.preEditAction}" update="mainForm" rendered="#{pageBean.page != null}"/>
                            <p:commandButton value="Xóa" actionListener="#{pageBean.preDeleteAction}" update="mainForm:deleteMsgs" 
                                             rendered="#{pageBean.page != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.jsf" />  
                                <p:menuitem value="Danh sách trang" url="list.jsf" />
                            </p:menuButton>  
                        </p:toolbarGroup>
                    </p:toolbar>
                    
                    <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                                 columns="2" cellpadding="5" width="100%" rendered="#{pageBean.page != null}">  
                        <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên trang" />  
                        <h:outputText value="#{pageBean.page.name}" id="name" />
                        
                        <h:outputLabel for="link" style="display: inline; float: right; padding-right: 5px;" value="Link" />  
                        <h:outputText value="#{pageBean.page.link}" id="link"/>
                        
                        <h:outputLabel for="role" style="display: inline; float: right; padding-right: 5px;" value="Role" />  
                        <h:outputText value="#{pageBean.page.role.name}" id="role"/>
                    </h:panelGrid>
                    
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">
                            <p:button value="Tạo mới" outcome="new"/>
                            <p:commandButton value="Sửa" action="#{pageBean.preEditAction}" update="mainForm" rendered="#{pageBean.page != null}"/>
                            <p:commandButton value="Xóa" actionListener="#{pageBean.preDeleteAction}" update="mainForm:deleteMsgs" 
                                             rendered="#{pageBean.page != null}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.jsf" />  
                                <p:menuitem value="Danh sách trang" url="list.jsf" />
                            </p:menuButton>  
                        </p:toolbarGroup>
                    </p:toolbar>
                    
                    <p:dialog header="Thông báo" widgetVar="deleteDialog" width="250" showEffect="explode" hideEffect="explode">  
                        <p:dataList id="deleteMsgs" value="#{facesContext.messageList}"  
                                    var="msg" itemType="disc">  
                            <h:outputText value="#{msg.summary}"/>
                        </p:dataList>
                    </p:dialog>
                    
                    <p:confirmDialog message="Bạn có muốn xóa trang này?" appendToBody="true"
                                     header="Thông báo" severity="alert" widgetVar="deleteConfirm">  
                        <p:commandButton value="Có" oncomplete="deleteConfirm.hide()" update="mainForm:msgs"
                                         actionListener="#{pageBean.deleteAction()}" />  
                        <p:commandButton value="Không" onclick="deleteConfirm.hide()" type="button" />                     
                    </p:confirmDialog>
                    
                    <script type="text/javascript">
                        function handleDeleteRequest(xhr, status, args) {
                            if(args.validationFailed || args.invalid) {
                                deleteDialog.show();
                                jQuery('#dialog').effect("shake", { times:3 }, 100);  
                            } else {
                                deleteConfirm.show();
                            }
                        }  
                    </script>
                </p:panel>
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>